<template>
  <div>
    <div class="bg"></div>
    <div class="images">
      <!-- 上传头像 -->
      <el-upload
        v-loading="loading"
        class="avatar-uploader"
        :action="subUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        name="avatarfile"
        :with-credentials="true"
      >
        <img
          v-if="src"
          :src='src'
          class="avatar"
        >
        <i
          v-else
          class="el-icon-plus avatar-uploader-icon"
        ></i>
      </el-upload>
      <span class="userName">{{name}}</span>
    </div>
    <div>
      <div class="information ">
        <div class="row">
          <div class="col1 el-icon-user"></div>
          <div class="col2">{{loginname}}</div>
        </div>
        <div class="row">
          <div class="col1"><i class="el-icon-mobile-phone"></i></div>
          <div class="col2">{{phonenumber}}</div>
        </div>
        <div class="row">
          <div class="col1"><i class="el-icon-message"></i></div>
          <div class="col2">{{email}}</div>
        </div>
      </div>
      <div class="set">
        <div
          class="row"
          @touchstart="touchstart"
          @touchend="myTalk"
        >
          <div class="el-icon-edit col1"></div>
          <div class="col3">我的帖子</div>
          <div class="el-icon-arrow-right right"></div>
        </div>
        <div
          class="row"
          @touchstart="touchstart"
          @touchend="changeData"
        >
          <div class="el-icon-setting col1"></div>
          <div class="col3">修改资料</div>
          <div class="el-icon-arrow-right right"></div>
        </div>
      </div>
      <div
        class="set"
        @touchstart="touchstart"
        @touchend="login"
      >
        <div class="exit">退出登录</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMe } from "../api/luntan-getmy.js";
import { subHeadImg } from "../api/luntan-getmy.js";
import { logout } from "../api/luntan-getmy.js";
import { getBase64 } from "../util/fn.js";

export default {
  methods: {
    touchstart(event) {
      let e = event || window.event;
      this.startClientX = e.targetTouches[0].clientX;
      this.startClientY = e.targetTouches[0].clientY;
    },
    myTalk(event) {
      let e = event || window.event;
      this.endClientX = e.changedTouches[0].clientX;
      this.endClientY = e.changedTouches[0].clientY;
      let absX = Math.abs(this.endClientX - this.startClientX);
      let absY = Math.abs(this.endClientY - this.startClientY);
      if (absX < 10 && absY < 10) {
        this.$router.push({
          path: "/home/my-posts"
          // 我参与的页面地址
        });
      }
    },
    login(event) {
      let e = event || window.event;
      this.endClientX = e.changedTouches[0].clientX;
      this.endClientY = e.changedTouches[0].clientY;
      let absX = Math.abs(this.endClientX - this.startClientX);
      let absY = Math.abs(this.endClientY - this.startClientY);
      if (absX < 10 && absY < 10) {
        logout();
        this.$router.push({
          path: "/home/login"
        });
      }
    },
    changeData(event) {
      let e = event || window.event;
      this.endClientX = e.changedTouches[0].clientX;
      this.endClientY = e.changedTouches[0].clientY;
      let absX = Math.abs(this.endClientX - this.startClientX);
      let absY = Math.abs(this.endClientY - this.startClientY);
      if (absX < 10 && absY < 10) {
        this.$router.push({
          path: "/home/changeInformation"
          // 修改资料页面地址
        });
      }
    },
    handleAvatarSuccess(res, file) {
      this.src = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
        return;
      }
      this.loading = true;
      subHeadImg(file).then(res => {
        console.log(res);
        getBase64(file, base => {
          this.src = base;
          this.loading = false;
        });
      });
    }
  },
  created() {
    getMe().then(res => {
      this.src = res.data.avatar;
      this.name = res.data.userName;
      this.loginname = res.data.loginName;
      this.phonenumber = res.data.phonenumber;
      this.email = res.data.email;
      // debugger
    });
  },
  data() {
    return {
      src: "",
      name: "",
      loginname: "",
      phonenumber: 0,
      email: "",
      subUrl:
        "http://59.111.92.205:8088/api/system/user/profile/update/avatar/nos",
      loading: false,
      startClientX: null,
      startClientY: null,
      endClientX: null,
      endClientY: null
    };
  }
};
</script>
<style lang="less" scoped>
.images {
  padding: 30px 0 50px;
  background-color: white;
  width: 100%;
  height: 150px;
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
  .userName {
    font-size: 30px;
  }
}
.information,
.set {
  margin: 20px 0px;
  background-color: #eeeeee;
  .row {
    display: flex;
    background-color: white;
  }
  .col1 {
    height: 35px;
    width: 30px;
    background-color: white;
    text-align: center;
    line-height: 35px;
    color: blue;
  }
  .col3 {
    height: 35px;
    width: 80px;
    background-color: white;
    text-align: center;
    line-height: 35px;
    border-bottom: 1px solid #eeeeee;
  }
  .ico {
    font-size: 20px;
  }
  .col2 {
    height: 35px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
    flex: 1;
    line-height: 35px;
    padding-left: 5px;
  }
  .right {
    line-height: 35px;
    padding-right: 3px;
    height: 35px;
    flex: 1;
    text-align: right;
    border-bottom: 1px solid #eeeeee;
  }
  .exit {
    height: 40px;
    text-align: center;
    background-color: white;
    line-height: 40px;
  }
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #eeeeee;
}
</style>